<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    body{
        font: 12px / 120% 微软雅黑, 宋体, Verdana, Arial, sans-serif;
        color: rgb(102, 102, 102);
    }
    .head{
        height: 60px;
        margin-top: 10px;
    }
    .head_left{
        float: left;
        display: inline;
        width: 230px;
    }
    .head_right{
        float: left;
        display: inline;
        width: 730px;
        line-height: 20px;
    }
    .head_right dl{
        width: 415px;
        padding-top: 10px;
        float: left;
        display: inline;
        margin-bottom: 0;
    }
    .head_right dt{
        width: 260px;
        border: 1px solid #CCCCCC;
        height: 30px;
        background: url(/static/img/header_bg.png) no-repeat;
        background-repeat: repeat-x;
        float: left;
    }
    .head_right dt i{
        background: url(/static/img/header_bg.png) no-repeat;
        width: 28px;
        height: 28px;
        line-height: 28px;
        float: left;
        display: inline;
        background-position: -81px -386px;
    }
    
    .head_right input{
        width: 228px;
        background-color: transparent;
        border: none;
        color: #666666;
        height: 25px;
        line-height: 25px;
        padding-top: 4px;
        float: left;
        display: inline;
        font-weight: normal;
    }
    .head_right dd{
        float: left;
        display: inline;
        height: 30px;
    }
    .head_right .search_book{
        width: 70px;
        border: none;
        background: url(/static/img/header_bg.png) no-repeat;
        background-position: 0 -29px;
        float: left;
        display: inline;
        height: 30px;
    }
    .head_right .login_box{
        width: 330px;
        padding: 20px 20px 0 0;
        text-align: right;
        float: right;
        display: inline;
    }
    .clear{
        clear: both;
    }
    .menu{
        height: 40px;
        margin-top: 5px;
        background: url(/static/img/header_bg.png) no-repeat;
        background-repeat: repeat-x;
        background-position: 0 -89px;
        position: relative;
        border-radius: 10px;
    }
    .menu ul{
        display: block;
    }
    .menu ul li{
        float: left;
        display: inline;
        font-size: 14px;
        padding-left: 12px;
        font-weight: bold;
        line-height: 39px;
        background: transparent;
    }
    .menu ul li a{
        text-decoration: none;
    }
    .active a{
        color: red;
        font-weight: bold;
    }
    .my_bookshelf a{
        float: left;
        display: inline;
        width: 100px;
        height: 30px;
        margin: 5px 30px;
        background: url(/static/img/header_bg.png) no-repeat;
        background-position: 0 -170px;
    }
</style>


<div class="head">
    <div class="head_left"><a href="{% url 'main:index' %}"><img src="/static/img/logo.gif" alt=""></a></div>
    <div class="head_right">
        <div>顶点小说：快速稳定 免费阅读</div>
        <form method="get" action="/search">
            <dl>
                <dt>
                    <i></i>
                    <input required type="text" name="q" placeholder="请输入要搜索的图书名">
                </dt>
                <dd>
                    <button type="submit" class="search_book" value="搜索"></button>
                </dd>
            </dl>
        </form>
        <div class="login_box">
            {% if not request.user.is_authenticated %}
            <form action="#">
                欢迎您，
                [<a href="{% url 'user:login' %}">登录</a>]
                或
                [<a href="{% url 'user:register' %}">注册</a>]
            </form>
            {% else %}
            <form>
                欢迎您，
                <span style="color: red">{{ request.user }}</span>
                [<a href="{% url 'user:logout' %}">退出登录</a>]
            </form>
            {% endif %}
        </div>
    </div>
</div>
<div class="clear"></div>
<div class="menu">
    <ul>
        <li class="active"><a href="{% url 'main:index' %}">首页</a></li>
        {% for c in cs %}
        <li><a class="{{ c.id }}" href="{% url 'main:category' c.id %}">{{ c.name }}</a></li>
        {% endfor %}
        <li><a href="{% url 'main:ranking' %}">排行榜</a></li>
        <li class="my_bookshelf"><a href="{% url 'operate:collect' %}"></a></li>
    </ul>
</div>


